"use client"


import {PageHeader} from "@/components/page-header";
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"
import {TrendingDown, TrendingUp} from "lucide-react";
import {Badge} from "@/components/ui/badge";
import {Bar, BarChart, CartesianGrid, XAxis} from "recharts"
import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
    {month: "January", desktop: 186},
    {month: "February", desktop: 305},
    {month: "March", desktop: 237},
    {month: "April", desktop: 73},
    {month: "May", desktop: 209},
    {month: "June", desktop: 214},
]
const chartConfig = {
    desktop: {
        label: "数量",
        color: "var(--chart-1)",
    },
} satisfies ChartConfig


export default function Page() {
    return (
        <>
            <PageHeader items={[{title: "首页", url: "/dashboard"}, {title: "控制台", url: "#"}]}/>
            <div className="@container/main flex flex-1 flex-col gap-2">
                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
                    <div
                        className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
                        <Card className="@container/card bg-neutral-50">
                            <CardContent className={"grid grid-cols-2 gap-2"}>
                                <div>
                                    <CardDescription
                                        className="text-1xl font-semibold tabular-nums @[250px]/card:text-2xl">用户数量</CardDescription>
                                    <CardTitle
                                        className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl mt-1">
                                        1,234
                                    </CardTitle>
                                    <div className="line-clamp-1 flex gap-2 font-medium">
                                        本月趋势
                                        <Badge variant="outline">
                                            <TrendingUp/>
                                            +12.5%
                                        </Badge>
                                    </div>
                                </div>
                                <div>
                                    <ChartContainer config={chartConfig}>
                                        <BarChart accessibilityLayer data={chartData}>
                                            <CartesianGrid vertical={false}/>
                                            <XAxis
                                                dataKey="month"
                                                tickLine={false}

                                                tickMargin={10}
                                                axisLine={false}
                                                tickFormatter={(value) => value.slice(0, 3)}
                                            />
                                            <ChartTooltip
                                                cursor={false}
                                                content={<ChartTooltipContent indicator={"dashed"}/>}
                                            />
                                            <Bar dataKey="desktop" radius={8}/>
                                        </BarChart>
                                    </ChartContainer>
                                </div>

                            </CardContent>

                        </Card>
                        <Card className="@container/card bg-neutral-50">
                            <CardContent className={"grid grid-cols-2 gap-2"}>
                                <div>
                                    <CardDescription
                                        className="text-1xl font-semibold tabular-nums @[250px]/card:text-2xl">岗位数量</CardDescription>
                                    <CardTitle
                                        className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl mt-1">
                                        1,234
                                    </CardTitle>
                                    <div className="line-clamp-1 flex gap-2 font-medium">
                                        本月趋势
                                        <Badge variant="outline">
                                            <TrendingUp/>
                                            +12.5%
                                        </Badge>
                                    </div>
                                </div>
                                <div>
                                    <ChartContainer config={chartConfig}>
                                        <BarChart accessibilityLayer data={chartData}>
                                            <CartesianGrid vertical={false}/>
                                            <XAxis
                                                dataKey="month"
                                                tickLine={false}

                                                tickMargin={10}
                                                axisLine={false}
                                                tickFormatter={(value) => value.slice(0, 3)}
                                            />
                                            <ChartTooltip
                                                cursor={false}
                                                content={<ChartTooltipContent indicator={"dashed"}/>}
                                            />
                                            <Bar dataKey="desktop" radius={8}/>
                                        </BarChart>
                                    </ChartContainer>
                                </div>

                            </CardContent>

                        </Card>
                        <Card className="@container/card bg-neutral-50">
                            <CardContent className={"grid grid-cols-2 gap-2"}>
                                <div>
                                    <CardDescription
                                        className="text-1xl font-semibold tabular-nums @[250px]/card:text-2xl">简历数量</CardDescription>
                                    <CardTitle
                                        className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl mt-1">
                                        1,234
                                    </CardTitle>
                                    <div className="line-clamp-1 flex gap-2 font-medium">
                                        本月趋势
                                        <Badge variant="outline">
                                            <TrendingUp/>
                                            +12.5%
                                        </Badge>
                                    </div>
                                </div>
                                <div>
                                    <ChartContainer config={chartConfig}>
                                        <BarChart accessibilityLayer data={chartData}>
                                            <CartesianGrid vertical={false}/>
                                            <XAxis
                                                dataKey="month"
                                                tickLine={false}

                                                tickMargin={10}
                                                axisLine={false}
                                                tickFormatter={(value) => value.slice(0, 3)}
                                            />
                                            <ChartTooltip
                                                cursor={false}
                                                content={<ChartTooltipContent indicator={"dashed"}/>}
                                            />
                                            <Bar dataKey="desktop" radius={8}/>
                                        </BarChart>
                                    </ChartContainer>
                                </div>

                            </CardContent>

                        </Card>

                        <Card className="@container/card bg-neutral-50">
                            <CardContent className={"grid grid-cols-2 gap-2"}>
                                <div>
                                    <CardDescription
                                        className="text-1xl font-semibold tabular-nums @[250px]/card:text-2xl">简历投递量</CardDescription>
                                    <CardTitle
                                        className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl mt-1">
                                        1,234
                                    </CardTitle>
                                    <div className="line-clamp-1 flex gap-2 font-medium">
                                        本月趋势
                                        <Badge variant="outline">
                                            <TrendingUp/>
                                            +12.5%
                                        </Badge>
                                    </div>
                                </div>
                                <div>
                                    <ChartContainer config={chartConfig}>
                                        <BarChart accessibilityLayer data={chartData}>
                                            <CartesianGrid vertical={false}/>
                                            <XAxis
                                                dataKey="month"
                                                tickLine={false}

                                                tickMargin={10}
                                                axisLine={false}
                                                tickFormatter={(value) => value.slice(0, 3)}
                                            />
                                            <ChartTooltip
                                                cursor={false}
                                                content={<ChartTooltipContent indicator={"dashed"}/>}
                                            />
                                            <Bar dataKey="desktop" radius={8}/>
                                        </BarChart>
                                    </ChartContainer>
                                </div>

                            </CardContent>

                        </Card>
                    </div>
                    <div className={"flex flex-col px-6 gap-4"}>
                        2313
                    </div>

                </div>

            </div>
        </>
    )
}
